<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>Document</title>
    <link rel="stylesheet" href="../public/css/bootstrap.css">

    <script src="../public/js/jquery.js"></script>
    <!-- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            display: inline-block;
            margin: 0;
            padding: 0;
            display: block;
            list-style-type: disc;
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 0px;
        }
        
        ul li {
            list-style-type: none;
            position: relative;
            display: inline;
        }
        
        a {
            line-height: 37px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            height: 37px;
            width: 37px;
            background-color: #ccc;
            color: rgb(44, 44, 218);
            margin-right: 0;
        }
        
        #prevpage,
        #nextpage,
        #totalpage {
            width: 60px;
        }
        
        .active {
            background-color: #00a9f4;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="#" id="prevpage">上一页</a>
        </li>
        <li>
            <a href="#" class=" active">1</a>
        </li>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#" id="nextpage">下一页</a>
        </li>
        <li>
            <a href="# " id="totalpage">总页数</a>
        </li>
    </ul>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" aria-label="Checkbox for following text input">
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with checkbox">
    </div>
    <div class="test">
        <div id="main">

            <div class="content">
                <div class="pics" id="pc1"></div>
                <div class="pics" id="pc2"></div>
                <div class="pics" id="pc3"></div>
                <div class="pics" id="pc4"></div>
                <div class="pics" id="pc8"></div>
                <div class="pics" id="pc7"></div>
                <div class="pics" id="pc6"></div>
                <div class="pics" id="pc5"></div>
                <div class="pics" id="pc9"></div>
                <div class="pics" id="pc10"></div>
                <div class="pics" id="pc11"></div>
                <div class="pics" id="pc12"></div>
            </div>
            <div class="but" id="pre"></div>
            <div class="but" id="next"></div>
            <div id="totle"> <img class="littlepics" id="lipic1" alt="0" src="#" /> <img class="littlepics" id="lipic2" alt="1" src="#" /> <img class="littlepics" id="lipic3" alt="2" src="#" /> <img class="littlepics" id="lipic4" alt="3" src="#" /> <img class="littlepics"
                    id="lipic5" alt="4" src="#" /> </div>
        </div>
    </div>
    <script>
        $('#totalpage').click(function() {
            alert(0)
        })
    </script>
</body>

</html>